<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<title>支付订单</title>
	<script src="../plugins/vue/vue.js"></script>
	<script src="../plugins/elementui/index.js"></script>
	<link rel="stylesheet" href="../plugins/elementui/index.css">
	<script src="../plugins/vue/axios-0.18.0.js"></script>
	<link rel="stylesheet" href="../css/paystyle.css">
	<script src="../js/jquery.min.js"></script>
	<script src="../js/qrcode.min.js"></script>
	<script src="../plugins/jquery/dist/jquery.min.js"></script>
	<script src="../plugins/datapicker/datePicker.js"></script>
	<script src="../plugins/healthmobile.js"></script>
	<script src="../layer/layer.js"></script>

</head>
	
<body>
<div id="app">
<!--头部  star-->
<header style="color:#fff">
	<a href="javascript:history.go(-1);">
		<div class="_left"><img src="../images/left.png"></div><span style="font-size: larger;color: #0a0a0a;">传智健康收银台</span></a>
</header>
<!--头部 end-->
<!--内容 star-->
	<div class="social-share1" style="text-align:center; display:none;" id="shareDiv">
	<img id="testimg" style="float: none;cursor:pointer" alt="" width="300" height="300"/>
</div>
<div class="contaniner fixed-cont">
	<div class="pay_img"><img src="../images/pay.jpg"></div>
	<div align="center"><li id="timer" style="font-size: small"></li></div>
    <div class="payTime" align="center">
    	<!--<li><span>剩余时间14:56</span></li>-->
        <li><strong>¥{{order.price}}</strong></li>
        <li>订单号:{{order.orderNum}}</li>
    </div>
    
    <!--支付 star-->
	<div class="pay">
		<div class="show">
			<li><label><img src="../images/weixin.png" >微信支付<input name="Fruit" type="radio" value="" checked/><span></span></label> </li>
    		<li><label><img src="../images/zhifubao.png" >支付宝支付<input name="Fruit" type="radio" value="" /><span></span></label> </li>
    		<li><label><img src="../images/yue.png" >余额支付<input name="Fruit" type="radio" value="" /><span></span></label> </li>
    		<li class="center"><a href="#" onClick="showHideCode()">查看更多支付方式↓</a></li>
		</div>
		<div class="showList" id = "showdiv" style="display:none;">
			<li><label><img src="../images/yinhang.png" >银行卡<input name="Fruit" type="radio" value="" /><span></span></label> </li>
            <li><label><img src="../images/unionpay.jpg" >云闪付<input name="Fruit" type="radio" value=""/><span></span></label> </li>
            
            <li style="background:none" ></li>
		</div>
	</div> 
    <!--支付 end-->
</div>
<div class="book-recovery-bot2" id="footer" @click="open">
<!--	<a href="#">-->
		<div class="payBottom">
    	<li class="textfr" onclick="share()"><a href="#">确认支付</a></li>
        <!--<li class="textfl"><span>{{order.price}}</span></li>-->
<!--	</div>-->
	</a>
</div>
</div>
</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            order:{}
        },
        created(){
        	/*每隔一秒查询一次 支付状态*/
            setInterval(()=>{
                axios.get("/order/findIsPaidByOrderId.do?oid="+id).then((res)=>{
                    //console.info(res.data.data.price)
                    if (res.data.flag) {
                        this.order = res.data.data
                        if (res.data.data.isPaid == 1){
                            this.$message.success("支付成功!")
                            location.href="orderSuccess.html?id="+res.data.data.id;
                            return;
                        }
                    }
                })
            },1000),
					/*9秒=>超时*/
                setTimeout(()=> {
                    location.href="orderFail.html"
                },120000)
        },
        methods:{


        }

    })
    var oBox= document.getElementById('timer');
    var maxtime = 1 * 60 * 15;
    function CountDown() {
        if (maxtime >= 0) {
            minutes = Math.floor(maxtime / 60);
            seconds = Math.floor(maxtime % 60);
            msg = "支付剩余时间" + minutes + ":" + seconds + "秒";
            oBox.innerHTML = msg;
            if (maxtime == 5 * 50)alert("请注意剩余时间");
            --maxtime;
        } else{
            clearInterval(timer);
            alert("时间到，订单关闭!");
            //location.href="http://www.baidu.com"
        }
    }
    timer = setInterval("CountDown()", 1000);
    var codeUrl = getcodeUrl("code_url")
	//console.info(codeUrl)
    var id = getUrlParam("oid");
    let qrCode = new QRCode('qrCode',{
        text:codeUrl,
        width:250,
        height:250,
        // colorLight: '#e21918',
        // colorDark: '#0078d7',
        correctLevel: QRCode.CorrectLevel.M
    });
    function showHideCode(){
        $("#showdiv").toggle();
    }
    function share(){
        $("#testimg").attr("src","http://qr.liantu.com/api.php?text="+codeUrl);
        layer.open({
            type: 1,
            skin: 'layui-layer-rim', //样式类名
            title:'支付二维码',
            offset: 'auto',
            area: ['400px', '400px'], //宽高
            closeBtn: 1, //不显示关闭按钮
            shade: 0,
            anim: 0,
            shadeClose: true, //开启遮罩关闭
            content: $("#shareDiv")
        });
    }
</script>
</body>
</html>